import React from "react";
import { Draggable, Droppable } from "react-beautiful-dnd";
import { ColumnType, TaskType } from "../state/initial-data";
import { Container, TaskList, Title } from "./lib";
import { Task } from "./Task";

type Props = {
  column: ColumnType;
  tasks: TaskType[];
  isDropDisabled?: boolean;
  index: number;
};

export const Column = ({ column, tasks, index, ...rest }: Props) => {
  return (
    <>
      <Draggable draggableId={column.id} index={index}>
        {(provided) => {
          return (
            <Container {...provided.draggableProps} ref={provided.innerRef}>
              <Title {...provided.dragHandleProps}>{column.title}</Title>
              <Droppable
                droppableId={column.id}
                // type可以限定放置的类型，type相同的Droppable可以drop
                /* type={column.id === "column-1" ? "TASK" : "OTHER"} */
                {...rest}
              >
                {(provide, snapshot) => {
                  return (
                    <TaskList
                      ref={provide.innerRef}
                      {...provide.droppableProps}
                      isDraggingOver={snapshot.isDraggingOver}
                    >
                      {tasks.map((task, index) => (
                        <Task key={task.id} task={task} index={index} />
                      ))}
                      {provide.placeholder}
                    </TaskList>
                  );
                }}
              </Droppable>
            </Container>
          );
        }}
      </Draggable>
    </>
  );
};
